<template>
    <van-grid :column-num="2" square :gutter="10">
        <van-grid-item v-for="item, index in brandList" :key="index" icon="photo-o" :text="(item as any).brand" @click="toList(currCategory as string,(item as any).brand)" />
    </van-grid>
</template>

<script setup lang="ts">
import type { Ref } from 'vue';
import { ref, reactive, watch, computed, onMounted, watchEffect } from 'vue';
import { getCategoryListAPI, getBrandListAPI } from "@/api/product";
import { useRouter } from 'vue-router';


let emits = defineEmits(["update:modelValue"]);
let model = defineModel("modelValue");
console.log(11111, model.value); // null


const router = useRouter();



let brandList = ref([]);

// 此属性需要通过父组件传入
let currCategory = computed(() => {
    return model.value;
})


const getBrandList = async () => {
    console.log(22222,currCategory.value);
    
    if (currCategory.value) {
        try {
            let result = await getBrandListAPI({
                category: currCategory.value
            });
            console.log("某个分类下的品牌列表请求成功", currCategory.value, result);
            brandList.value = result.data;

        } catch (err: any) {
            // showFailToast(err.message);
        }
    }
}

const toList = (category:string,brand:string)=>{
    router.push({path:"/list",query:{category,brand}})
}

watch(currCategory, () => {
    getBrandList();
})




onMounted(async () => {
    await getBrandList();
})
</script>

<style scoped></style>